<template >
  <div>
    <div class="search-detail">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch(value)"
          @cancel="onCancel"
        />
      </form>
    </div>
    <div class="history">
        <div class="title"><span>历史记录</span>
        <van-icon name="delete-o" @click=localDelete size="20" />
        </div>
        <ul class="hot-list">
            <li v-for="(item,i) in searchList" :key="i" @click=titleSend(item.name)>{{item}}</li>
        </ul>
    </div>
    <div class="hot-recommend">
        <div class="title">大家都在搜</div>
        <ul class="hot-list">
            <li v-for="(item,i) in data" :key="i"  @click=titleSend(item.name)>{{item.name}}</li>
        </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import VueAxios from "vue-axios";
export default {
  data() {
    return {
      value: "",
      data: [],
     
      searchList:[],
    };
  },
  methods: {
    onSearch(kw) {
        this.$router.push({ path: "/searchresult", query: { kw: kw } });
        const value = this.value.trim();
      
      if (!value) {
        //判断输入框的值是否为空  如果为空 直接返回不在执行
        return;
      }
      if (this.searchList.indexOf(value) === -1) {
        this.searchList.unshift(value);
        //历史记录最多只取十个
        this.searchList = this.searchList.slice(0, 10);
        localStorage.setItem("keyword", JSON.stringify(this.searchList));
      }
    },
    onCancel() {
      this.$router.push("/Search");
      
    },
    getKeyWord(){
        axios({
            method: "get",
            url: "https://apis.netstart.cn/xpc/search/recommend_kws",
          }).then((res) => {
            
            this.data =  res.data.data.list
          });
        
    },
    localDelete() {
        localStorage.removeItem("keyword");
        this.searchList = [];
    },
    titleSend(name){
        this.onSearch(name)
    }
    
  },
  mounted() {
        this.getKeyWord();
        this.searchList = JSON.parse(localStorage.getItem("keyword")) || []; 
    },
};
</script>
<style lang="scss">
.search-detail {
  box-sizing: border-box;
  font-size: 30px;
  .van-search {
    box-sizing: border-box;
    height: 14.4928vw;
  }
  .van-cell {
    padding: 10px;
    box-sizing: border-box;
  }
  .van-field__control {
    height: 6.2802vw;
    [placeholder] {
      font-size: 7.2vw;
    }
  }
  .van-search__action {
    font-size: 28px;
  }
  .van-field__body {
    [placeholder] {
      font-size: 27px;
      color: #9c9799;
    }
  }
  .van-icon-search {
    width: 4.3478vw;
    height: 6.2802vw;
    font-size: 4.3478vw;
    top: 1.3889vw;
  }
}
.hot-recommend{
    padding-bottom: 60px;
}
.hot-recommend,.history{
    padding: 20px;
    .title{
        font-size: 28px;
        color: #999999;
        padding: 20px 0;
        margin-bottom: 20px;
        display:flex;
        justify-content: space-between;
        align-items: center;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            padding: 10px;
            border-radius:10px;
            background-color: #fff;
            text-align: center;
            height: 6.0386vw;
            line-height: 6.0386vw;
            margin-right: 25px;
            margin-bottom: 20px;
        }
    }
}
</style>